<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>axios的拦截器</title>
		<script type="text/javascript" src="./js/axios.min.js"></script>
		<script type="text/javascript" src="./js/nprogress.js"></script>
		<link rel="stylesheet" href="./js/nprogress.css">
	</head>
	<body>
		<button onclick="getAllPerson()">获取所有人</button>
		
		<script type="text/javascript" >
			/* 
					axios的请求拦截器
							1.本质就是一个函数。
							2.请求发送之前会调用请求拦截器函数，并传入本次请求全部配置信息。
							3.用于对请求的各种配置进行修改、甚至取消本次请求。
							4.请求拦截器最后一定要返回配置信息，否则请求配置会丢失，axios会报错
			*/
			//请求拦截器
			axios.interceptors.request.use((config)=>{
				NProgress.start() //进度条开始走
				// console.log('@',config)
				config.headers.school += '0' //对请求头进行修改
				config.params.a *= 100 //对参数进行修改
				return config //务必返回配置信息
			})

			//响应拦截器
			axios.interceptors.response.use(
				(response)=>{ //若响应是成功的（axios底层在判断xhr.readystate === 4 及 xhr.status 2开头）
					console.log('响应成功了',response)
					NProgress.done()
					return response.data //从response响应对象中，把真正数据获取并返回
				}, 
				(error)=>{ //若响应是失败的
					// console.log('响应失败了',error)
					NProgress.done()
					return Promise.reject(error.message)
				}
			)

			function getAllPerson(){
				axios({
					url:'http://localhost:5000/persons56', //请求地址
					method:'GET', //请求方式
					params:{a:1},
					headers:{school:'atguigu'}
				}).then(
					response => {console.log('请求成功了',response)},
					error => {console.log('请求失败了',error)}
				)
			}

		</script>
	</body>
</html>